import { createTheme } from "@mui/material";
import { createGlobalStyle } from "styled-components";

export const light = createTheme({
  palette: {
    primary: { light: "#5757f3", main: "#51f", dark: "#4108cf" },
    mode: "light",
  },
});

export const dark = createTheme({
  palette: {
    primary: { light: "#cfcfcf", main: "#9f9f9f", dark: "#333" },
    mode: "dark",
    text: {
      // primary: "#ccc",
    },
  },
});

export const GlobalStyle = createGlobalStyle`
  html,body{
    height: 100%;
  }
  body{
    background-color:${(props: any) => props.theme.palette.background.default};
    margin:0;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
      'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;

    * {
      box-sizing: border-box;
    }

    ${props => {
      console.log(props);
      return "";
    }};
  }
  :root{
    --transition-duration :0.3s;
  }
`;
